define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'performance/percom/index' + location.search,
                    add_url: 'performance/percom/add',
                    edit_url: 'performance/percom/edit',
                    del_url: 'performance/percom/del',
                    multi_url: 'performance/percom/multi',
                    import_url: 'performance/percom/import',
                    table: 'percom',
                }
            });

            var table = $("#table");
            $(".btn-add").data("area", ["100%", "100%"]);

            //当内容渲染完成给编辑按钮添加`data-area`属性
            table.on('post-body.bs.table', function (e, settings, json, xhr) {
                $(".btn-editone").data("area", ["100%", "100%"]);
            });


            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                fixedColumns: true,
                fixedRightNumber: 1,
                Search: true,
                commonSearch: true,
                searchFormVisible: true,
                columns: [
                    [
                        { checkbox: true },
                        { field: 'id', title: __('Id'), operate: false },
                        { field: 'name', title: __('Name'), operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.content },
                        { field: 'type', title: __('Type'), operate: false, searchList: { "0": __('Type 0'), "1": __('Type 1'), "2": __('Type 2') }, formatter: Table.api.formatter.normal },
                        { field: 'createtime', title: __('Createtime'), operate: false, addclass: 'datetimerange', autocomplete: false, formatter: Table.api.formatter.datetime },
                        { field: 'status', title: __('Status'), searchList: { "0": __('Status 0'), "1": __('Status 1') }, formatter: Table.api.formatter.status },
                        // {field: 'shop_id', title: __('Shop_id')},
                        { field: 'staff_ids', title: __('Staff_ids'), operate: false, table: table, class: 'autocontent', formatter: Table.api.formatter.content },
                        // {field: 'status', title: __('Status'), searchList: {"0":__('Status 0'),"1":__('Status 1')}, formatter: Table.api.formatter.status},
                        // {field: 'gtype', title: __('Gtype'), searchList: {"0":__('Gtype 0'),"1":__('Gtype 1')}, formatter: Table.api.formatter.normal},
                        // {field: 'i1type', title: __('I1type'), searchList: {"0":__('I1type 0'),"1":__('I1type 1')}, formatter: Table.api.formatter.normal},
                        // {field: 'i3type', title: __('I3type'), searchList: {"0":__('I3type 0'),"1":__('I3type 1')}, formatter: Table.api.formatter.normal},
                        // {field: 'sku_ids', title: __('Sku_ids'), operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.content},
                        // {field: 'sku1_ids', title: __('Sku1_ids'), operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.content},
                        // {field: 'i3typesum', title: __('I3typesum'), operate: 'LIKE'},
                        // {field: 'i1typesum', title: __('I1typesum'), operate: 'LIKE'},
                        // {field: 'gtypesum', title: __('Gtypesum'), operate: 'LIKE'},

                        // {field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
                        { field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate }
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        recyclebin: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    'dragsort_url': ''
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: 'performance/percom/recyclebin' + location.search,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        { checkbox: true },
                        { field: 'id', title: __('Id') },
                        { field: 'name', title: __('Name'), align: 'left' },
                        {
                            field: 'deletetime',
                            title: __('Deletetime'),
                            operate: 'RANGE',
                            addclass: 'datetimerange',
                            formatter: Table.api.formatter.datetime
                        },
                        {
                            field: 'operate',
                            width: '140px',
                            title: __('Operate'),
                            table: table,
                            events: Table.api.events.operate,
                            buttons: [
                                {
                                    name: 'Restore',
                                    text: __('Restore'),
                                    classname: 'btn btn-xs btn-info btn-ajax btn-restoreit',
                                    icon: 'fa fa-rotate-left',
                                    url: 'performance/percom/restore',
                                    refresh: true
                                },
                                {
                                    name: 'Destroy',
                                    text: __('Destroy'),
                                    classname: 'btn btn-xs btn-danger btn-ajax btn-destroyit',
                                    icon: 'fa fa-times',
                                    url: 'performance/percom/destroy',
                                    refresh: true
                                }
                            ],
                            formatter: Table.api.formatter.operate
                        }
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },

        add: function () {
            Controller.api.bindevent();
            $('.radio-ipt').on('change', function () {
                console.log();
                const nextScale = $(this).closest('.form-group').next('.form-group').find('.scale-ipt span')
                if ($(this).val() == '0') {
                    nextScale.text('%')
                } else {
                    nextScale.text('元')
                }
            })
            $(document).on('change', '.select-change', function () {
                console.log($(this).val());
                
                const nextScale = $(this).closest('.scale').next('div').find('.scale-ipt span')
                if ($(this).val() == '0') {
                    nextScale.text('%')
                } else {
                    nextScale.text('元')
                }
            })
            $('.select-change').on('change', function () {
                console.log($(this).val());
                
                const nextScale = $(this).closest('.scale').next('div').find('.scale-ipt span')
                if ($(this).val() == '0') {
                    nextScale.text('%')
                } else {
                    nextScale.text('元')
                }
            })


            $('.next-btn').click(function () {
                if ($('#c-name').val() == '') {
                    return layer.msg('请输入方案名称')
                }
                $('.basic-box').hide()
                $('.yuan-box').eq(1).addClass('yuan-active')
                $('.heng').addClass('heng-active')
                $('.scheme-box').show()
                if ($('#c-type').val() == 0) {
                    $('.title1').html(`<div></div>
                        普通商品 <span>默认针对所有商品生效</span>`)
                    $('.title2').html(` <div></div>
                        卡项商品 <span>默认针对所有商品生效</span>`)
                    $('.title3').html(` 次卡`)
                    $('.title4').html(`  充值卡`)
                    $(`.sale-box0`).show()
                    $(`.sale-box2`).remove()
                } else if ($('#c-type').val() == 1) {
                    $('.title1').html(` <div></div>
                        单项服务 <span>默认针对所有商品生效</span>`)
                    $('.title2').html(` <div></div>
                        消耗服务 <span>默认针对所有商品生效</span>`)
                    $('.title3').html(`  次卡 <span>单次费用基数按照售卡金额均排，如:次卡售卡金额1980元10次，则单次费用为1980/10=198元按百分比按固定金额</span>`)
                    $('.title4').html(`  充值卡 <span>单次费用基数按单次实际扣除金额计算</span>`)
                    $(`.sale-box0`).show()
                    $(`.sale-box2`).remove()
                } else {
                    $(`.sale-box0`).remove()
                    $(`.sale-box2`).show()
                }


            })
            let addNum = 0
            $('.interzone-btn').click(function () {
                addNum++
                if ($('.way-max-money').last().val() == '' || $('.way-min-money').last().val() == '') return layer.msg('范围区间不能为空')
                $('.interzone-box').append(
                    ` <div class="way-box">
                            <div>累计业绩达标: </div>
                            <div class="radius">
                                <input class="form-control way-min-money" value="${$('.way-max-money').last().val()}" data-rule="required" style="width: 80px;"
                                    name="row[ladder][${addNum}][startamount]" type="number">
                                <span>至</span>
                                <input class="form-control way-max-money" data-rule="required" style="width: 80px;"
                                    name="row[ladder][${addNum}][endamount]" type="number">
                            </div>
                            <div>提成</div>
                            <div class="scale">
                                <select style="width: 100px;" class="form-control selectpicker select-change"
                                    name="row[ladder][${addNum}][type]">
                                    <option value="0">按百分比</option>
                                    <option value="1">按固定金额</option>
                                </select>
                            </div>
                            <div>
                                <div class="scale-ipt">
                                    <input class="form-control" data-rule="required" style="width: 100px;"
                                    name="row[ladder][${addNum}][typesum]" type="number">
                                    <span>%</span>
                                </div>
                                
                            </div>
                        </div>`
                )
            })
        },
        edit: function () {
            $('.radio-ipt').on('change', function () {
                console.log();
                const nextScale = $(this).closest('.form-group').next('.form-group').find('.scale-ipt span')
                if ($(this).val() == '0') {
                    nextScale.text('%')
                } else {
                    nextScale.text('元')
                }
            })
            $(document).on('change', ' .select-change', function () {
                const nextScale = $(this).closest('.scale').next('div').find('.scale-ipt span')
                if ($(this).val() == '0') {
                    nextScale.text('%')
                } else {
                    nextScale.text('元')
                }
            })
            $('.select-change').on('change', function () {
                console.log($(this).val());
                
                const nextScale = $(this).closest('.scale').next('div').find('.scale-ipt span')
                if ($(this).val() == '0') {
                    nextScale.text('%')
                } else {
                    nextScale.text('元')
                }
            })

            $('.scheme-box').show()
            if ($('#c-type').val() == 0) {
                $('.title1').html(`<div></div>
                        普通商品 <span>默认针对所有商品生效</span>`)
                $('.title2').html(` <div></div>
                        卡项商品 <span>默认针对所有商品生效</span>`)
                $('.title3').html(` 次卡`)
                $('.title4').html(`  充值卡`)
                $(`.sale-box0`).show()
                $(`.sale-box2`).remove()
            } else if ($('#c-type').val() == 1) {
                $('.title1').html(` <div></div>
                        单项服务 <span>默认针对所有商品生效</span>`)
                $('.title2').html(` <div></div>
                        消耗服务 <span>默认针对所有商品生效</span>`)
                $('.title3').html(`  次卡 <span>单次费用基数按照售卡金额均排，如:次卡售卡金额1980元10次，则单次费用为1980/10=198元按百分比按固定金额</span>`)
                $('.title4').html(`  充值卡 <span>单次费用基数按单次实际扣除金额计算</span>`)
                $(`.sale-box0`).show()
                $(`.sale-box2`).remove()
            } else {
                $(`.sale-box0`).remove()
                $(`.sale-box2`).show()
            }

            let addNum = $('.way-box').length || 0
            $('.interzone-btn').click(function () {
                addNum++
                if ($('.way-max-money').last().val() == '' || $('.way-min-money').last().val() == '') return layer.msg('范围区间不能为空')
                $('.interzone-box').append(
                    ` <div class="way-box">
                                <div>累计业绩达标: </div>
                                <div class="radius">
                                    <input class="form-control way-min-money" value="${$('.way-max-money').last().val()}" data-rule="required" style="width: 80px;"
                                        name="row[ladder][${addNum}][startamount]" type="number">
                                    <span>至</span>
                                    <input class="form-control way-max-money" data-rule="required" style="width: 80px;"
                                        name="row[ladder][${addNum}][endamount]" type="number">
                                </div>
                                <div>提成</div>
                                <div class="scale">
                                    <select style="width: 100px;" class="form-control selectpicker select-change"
                                        name="row[ladder][${addNum}][type]">
                                        <option value="0">按百分比</option>
                                        <option value="1">按固定金额</option>
                                    </select>
                                </div>
                                <div>
                                    <div class="scale-ipt">
                                      <input class="form-control" data-rule="required" style="width: 100px;"
                                      name="row[ladder][${addNum}][typesum]" type="number">
                                      <span>%</span>
                                    </div>
                                </div>
                            </div>`
                )
            })
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});
